<template>
    <div>
        <div class="header-title">
            <span @click="$router.go(-1)" class="mint-toast-icon mintui mintui-back"></span>
            <span>身份验证</span>
            <span></span>
        </div>
        <div class="num-list">
            <div class="input-area">
                <span>国家</span>
                <span @click="areaPage = true">{{phoneArea}} <span class="fa fa-angle-down"></span></span>      
            </div>
            <div class="input-area">
                <span>姓名</span>
                <input v-model="name" style="text-align:right" type="text" name="" id="" placeholder="请输入姓名">
            </div>
            <div class="input-area">
                <span>证件号</span>
                <input v-model="idCard" style="text-align:right" type="text" name="" id="" placeholder="请输入证件号">
            </div>
            <mt-button
                size="normal"
                class="submit-btn"
                @click="idCardAdd"
            >验证</mt-button>
        </div>
        <!-- 获取国家 -->
        <transition name="fade" mode="out-in">
            <div v-show="areaPage">
                <countryName @getAreaPage="getAreaPage" @getPhoneArea="getPhoneArea"></countryName>
            </div>
        </transition>
    </div>
</template>
<script>
import countryName from '../../../components/countryName'
import { Toast } from "mint-ui";
export default {
    data(){
        return{
            areaPage:false,//控制国家选择页的显示与隐藏
            phoneArea:"请选择国家",//从国家页获取国家名字
            countryId:'',//从国家页获取国家id
            token:JSON.parse(this.$store.state.userMsg).token,
            name:'',
            idCard:'',
        }
    },
    components:{
        countryName
    },
    methods:{
        idCardAdd(){
            if(this.name == '' && this.idCard == ''){
                Toast({ message: "名字和证件号不能为空！" });
                return false;
            }
            var params = {
                token :this.token ,
                countryId :this.countryId,
                name :this.name,
                idCard :this.idCard 
            }
            this.$axios.post(this.address.idCardId,params).then(res => {
                console.log(res.data)
                if(res.data.code == 200){
                    Toast({ message: "验证成功" });
                    this.$router.push({ name: "safetyCenter" });
                }else{
                    Toast({ message: res.data.msg });
                }
            })
        },
        //关闭获取国家页
        getAreaPage(status) {
            this.areaPage = status;
        },
        //获取国家id号
        getPhoneArea(name,id) {
            this.phoneArea = name;
            this.countryId = id
            console.log(this.phoneArea+'-'+this.countryId);
        }
    }
};
</script>
<style lang="less" scoped>
.num-list {
    padding: 15px;
    box-sizing: border-box;
}
</style>
